{% extends "base.html" %}
{% block title %}{{title}} - checklist {% endblock %}
{% block checklist %}
<link type="text/css" rel="stylesheet"
      href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/json/json-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/button/button-min.js"></script>
<style type="text/css">
    .align_center {
        text-align: center !important;
    }
</style>
<script type="text/javascript">
    YAHOO.util.Event.addListener(window, "load", function() {
        YAHOO.checklist.columns.RowDataMod = function() {
            var imageFormatter = function(elCell, oRecord, oColumn) {
                elCell.innerHTML = '<input type="image" src="/static/images/' + oColumn.key + '.png" name="' + oColumn.key + '" title="' + oColumn.label + ' row" />';
                elCell.style.cursor = 'pointer';
            };
            var disabledCheckeboxFormatter = function(elCell, oRecord, oColumn, oData) {
                var disabled="";
                if (oData=="Checkbox"||oData=="Item"){
                    disabled="disabled";
                }
                elCell.innerHTML = "<input type=\"checkbox\"" + " class=\"" + YAHOO.widget.DataTable.CLASS_CHECKBOX + "\""+
                       disabled + "/>";
            };

            var myColumnDefs = [
                {key:"name",resizeable:true,label:"",formatter:disabledCheckeboxFormatter,className:"align_center"},
                {key:"name",resizeable:true,label:"Column Name",editor: new YAHOO.widget.TextboxCellEditor({disableBtns:true})},
                {key:"type",resizeable:true,label:"Column Type",editor:new YAHOO.widget.DropdownCellEditor({dropdownOptions:["Checkbox","String","Category","Number","Yes/No","Date"],disableBtns:true})},
                {key:"up",resizeable:true,label:"Up",formatter:imageFormatter},
                {key:"down",resizeable:true,label:"Down",formatter:imageFormatter}
            ];
            {% if checklist %}
                var myDataSource = new YAHOO.util.DataSource({{checklist_columns}});
            {% else %}
                var myDataSource = new YAHOO.util.DataSource([{name:"Checkbox",type:"Checkbox"},{name:"Item",type:"String"}]);
            {% endif %}
            myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
            myDataSource.responseSchema = {
                fields: ["name","type"]
            };

            var myDataTable = new YAHOO.widget.DataTable("columns_container",
                    myColumnDefs, myDataSource, {});

            // Subscribe to events for row selection
            //myDataTable.subscribe("rowMouseoverEvent", myDataTable.onEventHighlightRow);
            //myDataTable.subscribe("rowMouseoutEvent", myDataTable.onEventUnhighlightRow);
            //myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);

            // Selects any cell that receives a checkbox click
            myDataTable.subscribe("checkboxClickEvent", function(oArgs) {
                var elCheckbox = oArgs.target;
                var elRow = this.getTrEl(elCheckbox);
                if (elCheckbox.checked) {
                    this.selectRow(elRow);
                } else {
                    this.unselectRow(elRow);
                }
            });

            // Move up/down the row that receives a up/down img click
            myDataTable.subscribe("buttonClickEvent", function(oArgs) {
                var elImage = oArgs.target;
                var elRow = this.getTrEl(elImage),
                        index = this.getTrIndex(elImage),
                        recordData = this.getRecord(elRow).getData();
                var mode = elImage.name;
                if (mode == "up") {
                    if (!YAHOO.lang.isNull(this.getPreviousTrEl(elImage))) {
                        this.deleteRow(index);
                        this.addRows([{name:recordData.name, type:recordData.type}], index - 1);
                    }
                } else if (mode == "down") {
                    if (!YAHOO.lang.isNull(this.getNextTrEl(elImage))) {
                        this.deleteRow(index);
                        this.addRows([{name:recordData.name, type:recordData.type}], index + 1);
                    }
                }
            });

            myDataTable.subscribe("cellClickEvent", myDataTable.onEventShowCellEditor);

            var getSelectedColumns = function(columns_choices) {
                if (columns_choices && columns_choices.selectedIndex != -1) {
                    var allData = [];
                    for (var i = 0,options = columns_choices.options; i < options.length; i++) {
                        if (options[i].selected) {
                            allData.push({name:options[i].value, type:options[i].className});
                        }
                    }
                    return allData;
                }
                else {
                    return [];
                }
            };

            // Add/update/delete rows as indicated
            var handleClick = function() {
                var mode = this.id,
                        columns_choices = YAHOO.util.Dom.get("columns_choices"),
                        index = myDataTable.getRecordSet().getLength();

                if (YAHOO.lang.isNumber(index)) {
                    switch (mode) {
                        case "addColumn":
                            var selectedColumns = getSelectedColumns(columns_choices);
                            if (selectedColumns.length > 0) {
                                myDataTable.addRows(selectedColumns, index);
                            }
                            return;
                        case "deleteColumn":
                            var selected = myDataTable.getSelectedRows();
                            var rset = myDataTable.getRecordSet();
                            for (var x = 0; x < selected.length; x++) {
                                myDataTable.deleteRow(rset.getRecordIndex(rset.getRecord(selected[x])));
                            }
                            return;
                        default:
                            break;
                    }

                }
                YAHOO.log("Could not continue due to invalid index.");
            };

            var getDataSet = function(myDataTable) {
                var allData = [];
                for (var i = 0,recordSet = myDataTable.getRecordSet(); i < recordSet.getLength(); i++) {
                    var data = recordSet.getRecord(i).getData();
                    data['order'] = i;
                    allData.push(data);
                }
                return allData;
            };

            //save template.
            var saveChecklist = function() {
                var checklistName = YAHOO.util.Dom.get("checklistName").value;
                if (checklistName.trim() == "") {
                    alert("Please input checklist name.");
                    YAHOO.util.Dom.get("checklistName").focus();
                    return;
                }

                var tags = YAHOO.util.Dom.get("tags");
                tags.value = tags.value.trim();

                var index = myDataTable.getRecordSet().getLength();
                if (YAHOO.lang.isNumber(index) && index > 0) {
                    var formObject = YAHOO.util.Dom.get('submitForm');
                    formObject["checklist_columns"].value = YAHOO.lang.JSON.stringify(getDataSet(myDataTable));
                    {% if checklist %}
                    formObject.action = "/edit/list/{{template.key}}";
                    {% else %}
                    formObject.action = "/create/list";
                    {% endif %}
                    formObject.submit();
                } else {
                    alert("Please choose at least one column to your checklist.");
                    YAHOO.util.Dom.get("columns_choices").focus();
                }
            };

            var cancelClick = function(){
                 window.location.href = "/list";
            };
            var checkChooseColumns = function(){
                if(this.checked){
                    YAHOO.util.Dom.setStyle(['columns_selector'], 'display', "");
                }else{
                    YAHOO.util.Dom.setStyle(['columns_selector'], 'display', "none");
                }
            };
            var selectTemplate = function(){
                var template_key = YAHOO.util.Dom.get("template_choice").value;
                if (template_key!=null && template_key.trim()!="") {
                    YAHOO.util.Connect.asyncRequest('POST', '/json/getTemplate',
                    {
                        success: function (o) {
                            if (!YAHOO.lang.isNull(o.responseText)) {
                                var responese = YAHOO.lang.JSON.parse(o.responseText);
                                YAHOO.util.Dom.get("template_desc").innerHTML = responese.template.description;
                                myDataTable.initializeTable();
                                myDataTable.addRows(responese.columns);
                                myDataTable.render();
                            }
                        },
                        failure: function (o) {
                            alert(o.statusText);
                        },
                        scope:this
                    }, "template_key=" + template_key
                            );
                }else{
                    YAHOO.util.Dom.get("template_desc").innerHTML = "";
                }

            };

            {% if checklist %}
                YAHOO.util.Dom.setStyle(['columns_selector'], 'display', "");
                YAHOO.util.Dom.get("chooese_columns_chkbox").checked = true;
            {% else %}
                YAHOO.util.Dom.setStyle(['columns_selector'], 'display', "none");
                YAHOO.util.Dom.get("chooese_columns_chkbox").checked = false;
            {% endif %}

            YAHOO.util.Event.addListener(["addColumn","deleteColumn"], "click", handleClick);
            YAHOO.util.Event.addListener("updateBtn", "click", saveChecklist);
            YAHOO.util.Event.addListener("cancelBtn", "click", cancelClick);
            YAHOO.util.Event.addListener("template_choice", "change", selectTemplate);
            YAHOO.util.Event.addListener("chooese_columns_chkbox", "click", checkChooseColumns);
            return {
                ds: myDataSource,
                dt: myDataTable
            };
        }();
    });
</script>
<div>
    <form method=post id="submitForm">
        <input type="hidden" id="checklist_json">
        <div>
            <button type="button" id="save_checklist_btn" class="checklist_action_button moz-border" disabled>Save Checklist</button> &nbsp;
            <button type="button" id="add_new_block" class="checklist_action_button moz-border">Add New Block</button>
            <p></p>
        </div>
        <table class="noborder_table" width="100%">
            <tr>
                <td>
                    Checklist name:
                </td>
                <td><input type="text" id="checklist_name" name="checklist_name"
                           value="{% if checklist %}{{checklist.name}}{% endif %}"></td>
            </tr>
            <tr>
                <td>Description:</td>
                <td><textarea rows="3" cols="50" id="checklist_desc"
                              name="checklist_desc">{% if checklist %}{{checklist.description}}{% endif %}</textarea></td>
            </tr>
            <tr>
                <td>Tags:</td>
                <td><input type=text id="tags" name="tags"
                           value="{% if checklist %}{{checklist.tags_commas}}{% endif %}">
                    <div class="form_desc">Seperated by commas. E.g. shopping, book, favorite song</div>
                </td>
            </tr>

            <tr>
                <td colspan="2">
                    The columns you would like to have in your checklist:
                    <div id="columns_container"
                         style="overflow:auto;height:230px;font-family:Courier New,monospace">
                    </div>
                </td>
            </tr>

        </table>

    </form>
</div>
<br>
{% endblock %}

